<template>
	<view class="root-massage" @click="demo">
		<view class="root-left">
			<img src="../../../static/image/Square/banner3.jpg" alt="">
		</view>
		<view class="root-right">
			<h4>爱心捐赠让闲置物品的不爱心捐赠让闲置物品的不</h4>
			<p>9月18日玉溪巿中医院、玉溪市供排水有限公司、城投党委的5名...</p>
			<view class="root-bottom-right">
				<view class="right-item">
					<u-icon name="thumb-up" color="#ccc" size="18"></u-icon>
					<p>123</p>
				</view>
				<view class="right-item">
					<u-icon name="eye" color="#ccc" size="18"></u-icon>
					<p>123</p>
				</view>
				<view class="right-item">
					<u-icon name="more-circle" color="#ccc" size="18"></u-icon>
					<p>123</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{}
		},
		methods:{
			demo(){
				uni.navigateTo({
					url:"/pages/Square/pages/Gyxiangqing"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.root-massage{
	width: 94%;
	height: 215upx;
	margin: 30upx auto;
	border-radius: 25upx;
	border: 1upx solid #ccc;
	.root-left{
		width: 45%;
		height: 215upx;
		float: left;
		display: flex;
		img{
			width: 94%;
			margin: auto;
		}
	}
	.root-right{
		width: 55%;
		height: 215upx;
		float: left;
		h4{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 20upx;
			padding: 0 15upx;
			font-size: 30upx;
		}
		p{
			margin-top: 10upx;
			padding: 0 15upx;
			font-size: 16upx;
		}
		.root-bottom-right{
			width: 300upx;
			height: 50upx;
			float: right;
			.right-item{
				margin: 25upx 5upx 0 5upx;
				width: 90upx;
				height: 40upx;
				float: left;
				position: relative;
				p{
					font-size: 18upx;
					color: #ccc;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
	}
}
</style>